import React from 'react';
import './Login.scss'
import { Button, Checkbox, Form, Input,message } from 'antd';
import pic from '../../assets/img/logo.png'
import {useNavigate} from 'react-router-dom'
import { MessageFilled} from '@ant-design/icons';
import { getLogin } from '../../api/Login'
interface Props {

}
function Login(props: Props) {
    const navigate = useNavigate()
    const [messageApi,contextHolder] = message.useMessage();

    //表单验证成功提交
    const onFinish =async (values: any) => {
        console.log(values);
        
        var res = await getLogin({doctorTel:values.tel,doctorPassword:values.password})
        console.log(res,'登录20');
        if (res.data.code==200) {
            messageApi.open({
                type: 'success',
                content: '登录成功',
            });
            //console.log(res,'26');
            localStorage.setItem('doctorName',res.data.data.doctorName)
            localStorage.setItem('doctorId',res.data.data.doctorId)
            localStorage.setItem('token',res.data.data.token)
            navigate("/index")
        }
    };

    //手机号的验证器
    var phoneValidator = (rule: any, value: string) => {
        if (/^1[3-9]\d{9}$/.test(value)) {
            return Promise.resolve()
        } else {
            return Promise.reject(new Error('请输入正确的手机号'))
        }
    }
    //密码的验证器
    var passValidator = (rule: any, value: string) => {
        if (value.length ) {
            return Promise.resolve()
        } else {
            return Promise.reject(new Error('请输入正确的密码'))
        }
    }
    return (
        <div className='login'>
            {contextHolder}
            <div className="box">
                <div className="left">
                    <h4>家庭医生后台管理系统</h4>
                    <img src={pic} alt="" />
                </div>
                <div className="right">
                <MessageFilled />
                    <h3>欢迎登录</h3>
                    <Form
                        name="basic"
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="tel"
                            rules={[{ required: true, message: '请输入手机号码' ,validator:phoneValidator}]}
                        >
                            <Input placeholder='请输入手机号'/>
                        </Form.Item>

                        <Form.Item
                            name="password"
                            rules={[{ required: true, message: '请输入密码' ,validator:passValidator}]}
                        >
                            <Input.Password placeholder='请输入密码'/>
                        </Form.Item>

                        <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 0, span: 24 }}>
                            <Checkbox>我已阅读并同意 <a>《用户隐私政策》</a></Checkbox>
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 0, span: 24 }}>
                            <Button type="primary" htmlType="submit">登录</Button>
                            <Button onClick={()=>{navigate('/register')}}>没有账号, 去注册</Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>
    );
}

export default Login;